<template>
	<view class="cu-modal bottom-modal" :class="{ show: showAuth }" @tap="closeAuthModal" style="z-index: 10080;">
		<view class="login-wrap cu-dialog form-wrap  safe-area-inset-bottom" @tap.stop
			style="border-radius: 20rpx 20rpx 0 0;">
			<!-- 1.賬號密碼登錄 -->
			<view v-if="authType === 'accountLogin'">
				<!-- 標題 -->
				<view class="head-box u-m-b-60 u-flex-col ">
					<view class="u-flex u-m-b-20">
						<view class="head-title u-m-r-40 head-title-animation">賬號登錄</view>
						<view class="head-title-active head-title-line" @tap="showAuthModal('smsLogin')">
							短信登錄
						</view>
					</view>
					<view class="head-subtitle">如果未設置過密碼，請點擊忘記密碼</view>
				</view>
				<view class="form-item  u-border-bottom ">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">賬號</view>
						<u-input class="u-m-r-10 u-flex-1" placeholder="請輸入賬號" @blur="checkValue($event, 'account')"
							@input="checkValue($event, 'account')" :placeholderStyle="placeholderStyle"
							v-model="form['accountLogin'].data.account" type="text"></u-input>
						<button class="u-reset-button forgot-btn" @tap="showAuthModal('forgotPwd')">
							忘記密碼
						</button>
					</view>
					<view class="message-error">
						{{ form["accountLogin"].error.account || "" }}
					</view>
				</view>
				
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">密碼</view>
						<u-input class="u-m-r-10 u-flex-1" placeholder="請輸入密碼" :placeholderStyle="placeholderStyle"
							v-model="form['accountLogin'].data.password" type="password"
							@blur="checkValue($event, 'password')" @input="checkValue($event, 'password')"></u-input>
						<button class="u-reset-button login-btn-start" @tap="accountLoginSubmit">
							登錄
						</button>
					</view>
					<view class="message-error">
						{{ form["accountLogin"].error.password || "" }}
					</view>
				</view>
				<button class="u-reset-button type-btn" @tap="showAuthModal('register')">
					立即註冊
				</button>
			</view>

			<!-- 2.短信登錄 -->
			<view v-if="authType === 'smsLogin'">
				<view class="head-box u-m-b-60">
					<view class="u-flex u-m-b-20">
						<view class="head-title-active u-m-r-40" @tap="showAuthModal('accountLogin')">
							賬號登錄
						</view>
						<view class="head-title head-title-line head-title-animation">
							短信登錄
						</view>
					</view>
					<view class="head-subtitle">未註冊手機號請先點擊下方立即註冊</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">手機號</view>
						<u-input class="u-m-r-10 u-flex-1" placeholder="請輸入手機號" @blur="checkValue($event, 'mobile')"
							@input="mobileInput($event, 'mobile')" :placeholderStyle="placeholderStyle"
							v-model="form['smsLogin'].data.mobile" type="number"></u-input>
						<button class="u-reset-button code-btn code-btn-start"
							:disabled="!form['smsLogin'].data.isMobileEnd"
							:class="{ 'code-btn-end': form['smsLogin'].data.isMobileEnd }"
							@tap="getSmsCode('mobilelogin')">
							{{ codeText }}
						</button>
					</view>
					<view class="message-error">{{ form["smsLogin"].error.mobile || "" }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">驗證碼</view>
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'code')"
							@input="checkValue($event, 'code')" placeholder="請輸入驗證碼"
							:placeholderStyle="placeholderStyle" v-model="form['smsLogin'].data.code"
							type="number"></u-input>
						<button class="u-reset-button login-btn-start" @tap="smsLoginSubmit">
							登錄
						</button>
					</view>
					<view class="message-error">{{ form["smsLogin"].error.code || "" }}</view>
				</view>
				<button class="u-reset-button type-btn" @tap="showAuthModal('register')">
					立即註冊
				</button>
			</view>

			<!-- 3.註冊 -->
			<view v-if="authType === 'register'">
				<view class="head-box u-m-b-60">
					<view class="head-title u-m-b-20">註冊</view>
					<view class="head-subtitle">請使用本人手機號完成註冊</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">手機號</view>
						<u-input class="u-m-r-10 u-flex-1" placeholder="請輸入手機號" @blur="checkValue($event, 'mobile')"
							@input="mobileInput($event, 'mobile')" :placeholderStyle="placeholderStyle"
							v-model="form['register'].data.mobile" type="number"></u-input>
						<button class="u-reset-button code-btn code-btn-start"
							:disabled="!form['register'].data.isMobileEnd"
							:class="{ 'code-btn-end': form['register'].data.isMobileEnd }"
							@tap="getSmsCode('register')">
							{{ codeText }}
						</button>
					</view>
					<view class="message-error">{{ form["register"].error.mobile || "" }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">密碼</view>
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'password')"
							@input="checkValue($event, 'password')" placeholder="請輸入密碼"
							:placeholderStyle="placeholderStyle" v-model="form['register'].data.password"
							type="password"></u-input>
					</view>
					<view class="message-error">{{ form["register"].error.password || "" }}</view>
				</view>
				<view class="form-item  u-border-bottom ">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">邀請碼</view>
						<u-input class="u-m-r-10 u-flex-1" placeholder="請輸入邀請碼" @blur="checkValue($event, 'referrer_code')"
							@input="checkValue($event, 'referrer_code')" :placeholderStyle="placeholderStyle"
							v-model="form['register'].data.referrer_code" type="text"></u-input>
						
					</view>
					<view class="message-error">
						{{ form["register"].error.referrer_code || "" }}
					</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">驗證碼</view>
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'code')"
							@input="checkValue($event, 'code')" placeholder="請輸入驗證碼"
							:placeholderStyle="placeholderStyle" v-model="form['register'].data.code"
							type="number"></u-input>
						<button class="u-reset-button login-btn-start" @tap="registerSubmit">
							註冊
						</button>
					</view>
					<view class="message-error">{{ form["register"].error.code || "" }}</view>
				</view>
				<button v-if="!isLogin" class="u-reset-button type-btn" @tap="showAuthModal('accountLogin')">
					返回登錄
				</button>
			</view>

			<!-- 4.忘記密碼 -->
			<view v-if="authType === 'forgotPwd'">
				<view class="head-box u-m-b-60">
					<view class="head-title u-m-b-20">忘記密碼</view>
					<view class="head-subtitle">為了您的賬號安全，修改密碼前請先進行安全驗證</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">手機號</view>
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'mobile')"
							@input="mobileInput($event, 'mobile')" :placeholderStyle="placeholderStyle"
							v-model="form['forgotPwd'].data.mobile" type="number"></u-input>
						<button class="u-reset-button code-btn code-btn-start"
							:disabled="!form['forgotPwd'].data.isMobileEnd"
							:class="{ 'code-btn-end': form['forgotPwd'].data.isMobileEnd }"
							@tap="getSmsCode('resetpwd')">
							{{ codeText }}
						</button>
					</view>
					<view class="message-error">{{ form["forgotPwd"].error.mobile || "" }}</view>
				</view>

				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">驗證碼</view>
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'code')"
							@input="checkValue($event, 'code')" placeholder="請輸入驗證碼"
							:placeholderStyle="placeholderStyle" v-model="form['forgotPwd'].data.code"
							type="number"></u-input>
					</view>
					<view class="message-error">{{ form["forgotPwd"].error.code || "" }}</view>
				</view>

				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">密碼</view>
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'password')"
							@input="checkValue($event, 'password')" placeholder="請輸入密碼"
							:placeholderStyle="placeholderStyle" v-model="form['forgotPwd'].data.password"
							type="password"></u-input>
						<button class="u-reset-button login-btn-start" @tap="forgotPwdSubmit">
							確認
						</button>
					</view>
					<view class="message-error">{{ form["forgotPwd"].error.password || "" }}</view>
				</view>
				<button v-if="!isLogin" class="u-reset-button type-btn" @tap="showAuthModal('accountLogin')">
					返回登錄
				</button>
			</view>

			<!-- 5.綁定手機號 -->
			<view v-if="authType === 'bindMobile'">
				<view class="head-box u-m-b-60">
					<view class="head-title u-m-b-20">綁定手機號</view>
					<view class="head-subtitle">為了您的賬號安全，請綁定手機號</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">手機號</view>
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'mobile')"
							@input="mobileInput($event, 'mobile')" placeholder="請輸入手機號"
							:placeholderStyle="placeholderStyle" v-model="form['bindMobile'].data.mobile"
							type="number"></u-input>
						<button class="u-reset-button code-btn code-btn-start"
							:disabled="!form['bindMobile'].data.isMobileEnd"
							:class="{ 'code-btn-end': form['bindMobile'].data.isMobileEnd }"
							@tap="getSmsCode('changemobile')">
							{{ codeText }}
						</button>
					</view>
					<view class="message-error">{{ form["bindMobile"].error.mobile || "" }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">驗證碼</view>
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'code')"
							@input="checkValue($event, 'code')" placeholder="請輸入驗證碼"
							:placeholderStyle="placeholderStyle" v-model="form['bindMobile'].data.code"
							type="number"></u-input>
						<button class="u-reset-button login-btn-start" @tap="bindMobileSubmit">
							立即綁定
						</button>
					</view>
					<view class="message-error">{{ form["bindMobile"].error.code || "" }}</view>
				</view>
			</view>

			<!-- 6.修改密碼 -->
			<view v-if="authType === 'changePwd'">
				<view class="head-box u-m-b-60">
					<view class="head-title u-m-b-20">修改密碼</view>
					<view class="head-subtitle"></view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">舊密碼</view>
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'oldPassword')"
							@input="checkValue($event, 'oldPassword')" placeholder="請輸入舊密碼"
							:placeholderStyle="placeholderStyle" v-model="form['changePwd'].data.oldPassword"
							type="password"></u-input>
					</view>
					<view class="message-error">
						{{ form["changePwd"].error.oldPassword || "" }}
					</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">新密碼</view>
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'newPassword')"
							@input="checkValue($event, 'newPassword')" placeholder="請輸入新密碼"
							:placeholderStyle="placeholderStyle" v-model="form['changePwd'].data.newPassword"
							type="password"></u-input>
					</view>
					<view class="message-error">
						{{ form["changePwd"].error.newPassword || "" }}
					</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">確認密碼</view>
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'reNewPassword')"
							@input="checkValue($event, 'reNewPassword')" placeholder="再次輸入新密碼"
							:placeholderStyle="placeholderStyle" v-model="form['changePwd'].data.reNewPassword"
							type="password"></u-input>
					</view>
					<view class="message-error">
						{{ form["changePwd"].error.reNewPassword || "" }}
					</view>
				</view>
				<view class="editPwd-btn-box u-m-t-80">
					<button class="u-reset-button save-btn" @tap="changePwdSubmit">保存</button>
					<button class="u-reset-button forgot-btn" @tap="showAuthModal('forgotPwd')">
						忘記密碼
					</button>
				</view>
			</view>

			<!-- 第三方登錄 -->
			<view v-if="authType === 'accountLogin' || authType === 'smsLogin'"
				class="auto-login-box u-flex u-row-center u-col-center">
				<!-- 微信 -->
				<button v-if="['App', 'wxOfficialAccount', 'wxMiniProgram'].includes(platform)" class="u-reset-button"
					open-type="getPhoneNumber" @getphonenumber="thirdLogin('wechat', $event)"
					@tap="thirdLogin('wechat')">
					<image class="auto-login-img" :src="$IMG_URL + '/imgs/auto_login_wx.png'"></image>
				</button>
				<!-- 支付寶 -->
				<!-- <image
					v-if="['App', 'alipayMiniProgram', 'H5'].includes(platform)"
					class="auto-login-img"
					@tap="thirdLogin('alipay')"
					:src="$IMG_URL + '/imgs/auto_login_ali.png'"
					mode=""
				></image> -->
				<!-- 蘋果 -->
				<!-- #ifdef APP-PLUS -->
				<image v-if="device === 'ios'" class="auto-login-img" @tap="thirdLogin('apple')"
					:src="$IMG_URL + '/imgs/auto_login_iphone.png'"></image>
				<!-- #endif -->
			</view>

			<!-- 協議 -->
			<view v-if="['accountLogin', 'smsLogin', 'register'].includes(authType)"
				class="agreement-box u-flex u-row-center">
				<u-checkbox v-model="protocol" shape="circle" active-color="#E9B461">
					<view class="agreement-text tcp-text u-flex u-col-center">
						我已閱讀並遵守
						<view class="tcp-text u-flex u-col-center">
							<view @tap.stop="
								$Router.push({
									path: '/pages/public/richtext',
									query: { id: initShop.user_protocol || 0 }
								})
							">
								《用戶協議》
							</view>
							與
							<view @tap.stop="
	$Router.push({
		path: '/pages/public/richtext',
		query: { id: initShop.privacy_protocol || 0 }
	})
							">
								《隱私協議》
							</view>
						</view>
					</view>
				</u-checkbox>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 登錄提示頁
 */
import FormValidate from "@/shopro/validate/form";
import schema from "@/uview-ui/libs/util/async-validator";
import wechat from "@/shopro/wechat/wechat";
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
// #ifdef APP-PLUS
import apple from "@/shopro/apple";
// #endif

export default {
	name: "shoproAuthModal",
	data() {
		return {
			platform: this.$platform.get(),
			device: this.$platform.device(),
			form: {
				// 1.賬號密碼登錄
				accountLogin: {
					data: {
						account: "", // 賬號
						password: "" // 密碼
					},
					rules: {
						account: FormValidate.account,
						password: FormValidate.password
					},
					error: {
						account: "",
						password: ""
					}
				},

				// 2.短信登錄
				smsLogin: {
					data: {
						mobile: "", // 手機號
						code: "", // 驗證碼
						isMobileEnd: false // 手機號輸入完畢
					},
					rules: {
						code: FormValidate.code,
						mobile: FormValidate.mobile
					},
					error: {
						mobile: "", // 手機號
						code: "" // 驗證碼
					}
				},
				// 3.註冊
				register: {
					data: {
						mobile: "", // 手機號
						code: "", // 驗證碼
						password: "", // 密碼
						isMobileEnd: false // 手機號輸入完畢
					},
					rules: {
						code: FormValidate.code,
						mobile: FormValidate.mobile,
						password: FormValidate.password
					},
					error: {
						mobile: "", // 手機號
						code: "", // 驗證碼
						password: "" // 密碼
					}
				},

				// 4.忘記密碼
				forgotPwd: {
					data: {
						mobile: "", //手機號
						code: "", //驗證碼
						password: "", //密碼
						isMobileEnd: false // 手機號輸入完畢
					},
					rules: {
						mobile: FormValidate.mobile,
						code: FormValidate.code,
						password: FormValidate.password
					},
					error: {
						mobile: "", //手機號
						code: "", //驗證碼
						password: "" //密碼
					}
				},
				// 5.綁定手機號
				bindMobile: {
					data: {
						mobile: "", //手機號
						code: "", //驗證碼
						isMobileEnd: false // 手機號輸入完畢
					},
					rules: {
						code: FormValidate.code,
						mobile: FormValidate.mobile
					},
					error: {
						mobile: "", //手機號
						code: "" //驗證碼
					}
				},
				// 6.修改密碼
				changePwd: {
					data: {
						oldPassword: "", //舊密碼
						newPassword: "", //新密碼
						reNewPassword: "" //確認密碼
					},
					rules: {
						oldPassword: FormValidate.password,
						newPassword: FormValidate.password,
						reNewPassword: [
							{
								required: true,
								message: "請重新輸入密碼",
								trigger: ["change", "blur"]
							},
							{
								validator: (rule, value, callback) => {
									return value === this.form.changePwd.data.newPassword;
								},
								message: "兩次輸入的密碼不壹致",
								trigger: ["change", "blur"]
							}
						]
					},
					error: {
						oldPassword: "", //舊密碼
						newPassword: "", //新密碼
						reNewPassword: "" //確認密碼
					}
				}
			},
			codeText: "獲取驗證碼",
			disabledCode: false,
			protocol: false, //是否同意隱私協議
			placeholderStyle: "font-size: 30rpx; font-weight: 500;color:#C2C7CF;"
		};
	},
	computed: {
		...mapGetters(["initShop", "isLogin", "authType"]),
		showAuth: {
			get() {
				// if(!this.isLogin){
				// 	uni.redirectTo({
				// 		url:'/pages/login/login'
				// 	})
				// }
				return !!this.authType;
			},
			set(value) {
				value ? uni.hideTabBar() : uni.showTabBar();
			}
		}
	},
	mounted() { },
	methods: {
		...mapActions(["getUserInfo", "showAuthModal"]),

		// 檢測
		checkValue(e, key) {
			this.validation(key);
		},

		// 校驗數據
		validation(key, callback = () => { }) {
			let that = this;
			//拿到需要校驗的數據
			let fieldValue = this.form[this.authType].data[key];
			//拿到需要檢驗的規則
			let rules = this.form[this.authType].rules[key];
			// 判空
			if (!rules || rules.length === 0) {
				return callback("");
			}
			// 設置當前的裝填，標識為校驗中
			let validateState = "validating";
			// 調用async-validator的方法
			let validator = new schema({
				[key]: rules
			});
			// 校驗
			validator.validate(
				{
					[key]: fieldValue
				},
				{
					firstFields: true
				},
				(errors, fields) => {
					// 記錄狀態和報錯信息
					validateState = !errors ? "success" : "error";
					let validateMessage = errors ? errors[0].message : "";
					that.form[that.authType].error[key] = validateMessage;
					callback(validateMessage);
				}
			);
		},

		// 校驗全部數據
		validateAll(callback) {
			let that = this;
			return new Promise(resolve => {
				// 對當前所有表單檢驗
				let valid = true; // 默認通過
				let count = 0; // 用於標記是否檢查完畢
				let errorArr = []; // 存放錯誤信息
				let curFormData = that.form[that.authType].data;
				Object.keys(curFormData).map(field => {
					that.validation(field, error => {
						// 如果回調有error
						if (error) {
							valid = false;
							errorArr.push(error);
						}
						if (++count === Object.keys(curFormData).length) {
							resolve(valid);
							if (errorArr.length) {
								this.$u.toast(errorArr[0]);
							}
							if (typeof callback == "function") callback(valid);
						}
					});
				});
			});
		},

		// 手機號是否輸入完畢
		mobileInput(e, key) {
			this.form[this.authType].data.isMobileEnd = this.$u.test.mobile(
				this.form[this.authType].data.mobile
			);
			this.validation(key);
		},

		closeAuthModal() {
			this.$store.dispatch("showAuthModal", "");
		},

		// 獲取短信驗證碼
		getSmsCode(type) {
			const that = this;
			if (that.form[this.authType].data.isMobileEnd && !that.disabledCode) {
				that.$http(
					"common.smsSend",
					{
						mobile: that.form[this.authType].data.mobile,
						event: type
					},
					"獲取驗證碼中..."
				).then(res => {
					if (res.code === 1) {
						that.codeChange();
						that.$u.toast("驗證碼已發送，請註意查收短信");
					} else {
						that.$u.toast(res.msg);
					}
				});
			} else {
				that.$u.toast("請稍後再試");
			}
		},

		// 倒計時
		codeChange() {
			if (this.disabledCode) return;
			this.disabledCode = true;
			let n = 60;
			this.codeText = n + "s";
			const run = setInterval(() => {
				n -= 1;
				if (n < 0) {
					clearInterval(run);
				}
				this.codeText = n + "s";
				if (this.codeText < 0 + "s") {
					this.disabledCode = false;
					this.codeText = "重新獲取";
				}
			}, 1000);
		},

		// 規則校驗
		validateSubmit() {
			if (
				["accountLogin", "smsLogin", "register"].includes(this.authType) &&
				!this.protocol
			) {
				this.$u.toast("請同意用戶協議");
				return false;
			}
			return this.validateAll();
		},

		// 第三方登錄
		async thirdLogin(provider, payload = null) {
			if (this.platform === 'wxMiniProgram' && payload === null) return;
			if (!this.protocol) {
				this.$u.toast("請同意用戶協議");
				return false;
			}
			const that = this;
			let token = "";
			switch (provider) {
				case "wechat":
					token = await wechat.login(payload);
					break;
				case "alipay":
					break;
				case "apple":
					token = await apple.appleIdOauth();
					break;
				default:
					break;
			}
			if (token) {
				that.closeAuthModal();
				that.getUserInfo(token);
			}
		},

		// 1.賬號登錄
		async accountLoginSubmit() {
			let that = this;
			(await that.validateSubmit()) &&
				that
					.$http(
						"user.accountLogin",
						{
							account: that.form["accountLogin"].data.account,
							password: that.form["accountLogin"].data.password
						},
						"登錄中..."
					)
					.then(res => {
						if (res.code === 1) {
							that.closeAuthModal();
							that.getUserInfo(res.data.token);
							that.$u.toast(res.msg);
						}
					});
		},

		// 2.短信登錄
		async smsLoginSubmit() {
			let that = this;
			(await that.validateSubmit()) &&
				that
					.$http(
						"user.smsLogin",
						{
							mobile: that.form["smsLogin"].data.mobile,
							code: that.form["smsLogin"].data.code
						},
						"登錄中..."
					)
					.then(res => {
						if (res.code === 1) {
							that.closeAuthModal();
							that.getUserInfo(res.data.token);
							that.$u.toast(res.msg);
						}
					});
		},

		// 3.註冊
		async registerSubmit() {
			let that = this;
			(await that.validateSubmit()) &&
				that
					.$http(
						"user.register",
						{
							mobile: that.form["register"].data.mobile,
							code: that.form["register"].data.code,
							password: that.form["register"].data.password
						},
						"註冊中..."
					)
					.then(res => {
						if (res.code === 1) {
							that.$u.toast(res.msg);
							that.closeAuthModal();
							that.getUserInfo(res.data.token);
						}
					});
		},

		// 4.忘記密碼
		async forgotPwdSubmit() {
			let that = this;
			(await that.validateSubmit()) &&
				that
					.$http(
						"user.forgotPwd",
						{
							mobile: that.form["forgotPwd"].data.mobile,
							code: that.form["forgotPwd"].data.code,
							password: that.form["forgotPwd"].data.password
						},
						"修改中..."
					)
					.then(res => {
						if (res.code === 1) {
							that.$u.toast(res.msg);
							if (that.isLogin) {
								that.closeAuthModal();
							} else {
								that.showAuthModal("accountLogin");
							}
						}
					});
		},

		// 5.綁定手機
		async bindMobileSubmit() {
			let that = this;
			(await that.validateSubmit()) &&
				that
					.$http(
						"user.bindMobile",
						{
							mobile: that.form["bindMobile"].data.mobile,
							code: that.form["bindMobile"].data.code,
							password: that.form["bindMobile"].data.password
						},
						"綁定中..."
					)
					.then(res => {
						if (res.code === 1) {
							that.$u.toast(res.msg);
							that.closeAuthModal();
							that.getUserInfo();
						}
					});
		},

		// 6.修改密碼
		async changePwdSubmit() {
			let that = this;
			(await that.validateSubmit()) &&
				that
					.$http(
						"user.changePwd",
						{
							oldpassword: that.form["changePwd"].data.oldPassword,
							newpassword: that.form["changePwd"].data.newPassword
						},
						"修改中..."
					)
					.then(res => {
						if (res.code === 1) {
							that.closeAuthModal();
							that.$u.toast(res.msg);
							that.getUserInfo(res.data.userinfo.token);
						}
					});
		}
	}
};
</script>

<style lang="scss" scoped>
@keyframes title-animation {
	0% {
		font-size: 32rpx;
	}

	100% {
		font-size: 36rpx;
	}
}

.form-wrap {
	.form-item {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		padding: 20rpx 0;
		color: $u-main-color;
		box-sizing: border-box;
		line-height: $u-form-item-height;
		width: 100%;

		.item-title {
			width: 140rpx;
			font-size: 30rpx;
			color: #333;
			font-weight: 600;
			text-align: left;
		}

		.message-error {
			text-align: left;
			font-size: 24rpx;
			line-height: 24rpx;
			color: $u-type-error;
			margin-top: 12rpx;
			margin-left: 120rpx;
		}
	}
}

.login-wrap {
	padding: 50rpx 34rpx;
	min-height: 700rpx;
	background-color: #fff;

	.head-box {
		.head-title {
			min-width: 160rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			line-height: 36rpx;
		}

		.head-title-active {
			width: 160rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #999;
			line-height: 36rpx;
		}

		.head-title-animation {
			animation-name: title-animation;
			animation-duration: 0.1s;
			animation-timing-function: ease-out;
			animation-fill-mode: forwards;
		}

		.head-title-line {
			position: relative;

			&::before {
				content: "";
				width: 1rpx;
				height: 34rpx;
				background-color: #e4e7ed;
				position: absolute;
				left: -30rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.head-subtitle {
			font-size: 26rpx;
			font-weight: 400;
			color: #c2c7cf;
			text-align: left;
			display: flex;
		}
	}

	.code-btn[disabled] {
		background-color: #fff;
	}

	.code-btn-start {
		width: 160rpx;
		line-height: 56rpx;
		border: 1rpx solid #e9b766;
		border-radius: 28rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #e9b766;
		opacity: 0.5;
	}

	.forgot-btn {
		width: 160rpx;
		line-height: 56rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #999;
	}

	.code-btn-end {
		opacity: 1 !important;
	}

	.login-btn-start {
		width: 158rpx;
		line-height: 56rpx;
		background: linear-gradient(90deg, #e9b461, #eecc89);
		border-radius: 28rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.type-btn {
		padding: 20rpx;
		margin: 40rpx auto;
		width: 200rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #999999;
	}

	.auto-login-box {
		width: 100%;

		.auto-login-img {
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
			margin: 0 30rpx;
		}
	}

	.agreement-box {
		margin: 80rpx auto 0;

		.protocol-check {
			transform: scale(0.7);
		}

		.agreement-text {
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;

			.tcp-text {
				color: #e9b562;
			}
		}
	}
}

// 修改密碼
.editPwd-btn-box {
	.save-btn {
		width: 690rpx;
		line-height: 70rpx;
		background: linear-gradient(90deg, #e9b461, #eecc89);
		border-radius: 35rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.forgot-btn {
		width: 690rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}
}
</style>